
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, Component, ContentChildren, Input, OnInit, QueryList, ViewChild, ViewChildren, ViewRef } from '@angular/core';
import { TabComponent } from './tab.component';
import { delay, filter, first, startWith, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-tabs',
  template: `
  <div class="top">
    <div class="l">
      <!-- 这里只是要个标题而已  遍历一个轻量的数组会不会好些-->
      <span (click)="toggle(index)" *ngFor="let v of bars; let index  = index" [ngClass]="{active:curIndex === index}" class="tab-title">
        {{v}}
      </span>

    </div>

    <div class="r">
      <ng-content select="[slot=nzTabBarExtraContent]"></ng-content>
    </div>
</div>
<main style="padding:5px 0;" >
    <ng-content>

    </ng-content>
</main>
  `,
  styles: [
    `
    .top{
      display: flex;
      justify-content: space-between;
    }
    .top .l{
      display: flex;
      gap:10px ;
    }
    .tab-title{
    padding: 10px 15px 8px 15px;
    position: relative;
    border-bottom: 2px solid transparent;
    cursor: pointer ;
}
.tab-title:hover{
  color: #409eff;
}
.tab-title.active{
  color: #409eff;
  border-bottom-color:#409eff ;
}
    `
  ]
})
export class TabsComponent implements OnInit, AfterViewInit, AfterContentInit {
  bars = [];
  curIndex = 0;
  @Input()
   set defualtIndex(v){
     /* 这是为了主动设置 活跃的tab 应该有更好的写法 */
     this.curIndex = v ;
     this.tabArray.length && this.toggle(v) ;
    
    }
  tabArray: TabComponent[] = [];
  
  constructor( private cd: ChangeDetectorRef) { }
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
  ngOnInit(): void {

  }
  toggle(index: number): void{
    this.curIndex = index ;
    this.tabArray.forEach((tab) => {
      tab.display = 'none' ;
    });
    this.tabArray[index].display = 'block' ;
    this.tabArray[index].clickcb() ;
  }
  ngAfterViewInit(): void {


  }
  ngAfterContentChecked(): void {
    /* 这个方法会调用多次 并且初始化时会在 init方法后调用 */

}
/* 
变更检测期间
更新所有子组件/指令的绑定属性
调用所有子组件/指令的三个生命周期钩子：ngOnInit，OnChanges，ngDoCheck
更新当前组件的 DOM
为子组件执行变更检测（译者注：在子组件上重复上面三个步骤，依次递归下去）
为所有子组件/指令调用当前组件的 ngAfterViewInit 生命周期钩子

属性值突变的罪魁祸首是子组件或指令，*/
  ngAfterContentInit(): void {
    /* 断点调试发现是子组件先触发这个init  然后是父组件 符合函数调用特征 */
    this.updateChidren(null)
    this.tabs.changes.pipe(startWith(this.tabs)).subscribe((data)=> {
      this.updateChidren(data) ;
    })
  }

  updateChidren(data){
    this.tabArray  =  this.tabs.toArray();
    this.bars = [] ;
    this.tabArray .forEach((tab, i) => {
      this.bars.push( tab.barTitle) ;
      tab.display = 'none' ;

    });
    /* 这里刚好在变更检测之后才去更改  就会导致ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked */

      this.tabArray[this.curIndex].display = 'block' ;
      // this.cd.detectChanges() ;// 增加一个变更检测  加了之后疯狂报错应该这个时候有些数据又没了
     //  this.tabs.notifyOnChanges(); // 通知变更吗 结果栈溢出了，无限触发检查？ 应该是不能和上面的混用, 不行
 
    console.log(this.tabArray, this.bars, data) ;
  
  }



}
